<template>
<div>
<header>
<div class="breadcrumb-wrapper">
<el-breadcrumb separator="/">
  <el-breadcrumb-item>首页</el-breadcrumb-item>
  <el-breadcrumb-item>光伏</el-breadcrumb-item>
  <el-breadcrumb-item>光伏收入参数</el-breadcrumb-item>
</el-breadcrumb>
</div>
</header>

<div class="viewWeb">  
    <main id="main">

<!--el-card的class="tabs-wrapper" 为每个页面缩小显示范围，增加滚动条 -->
<el-card>     
    <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="基本参数" name="first">
<div>
            <el-card class="box-card" shadow="hover">
                <div slot="header" class="clearfix">
                    <span>年限和装机数量</span>
                </div>
                <div class="text item">
                    <el-row align="center" justify="center">
                    开工年份
                    <el-input size="mini" v-model="input_start_year" style="width:100px"></el-input>
                    年
                    </el-row>
                    <el-row align="center" justify="center">
                    建设期
                    <el-input size="mini" v-model="input_build_year" style="width:100px"></el-input>
                    年
                    <el-input size="mini" v-model="input_build_month" style="width:100px"></el-input>
                    月
                    </el-row>
                    <el-row align="center" justify="center">
                    经营期
                    <el-input size="mini" v-model="input_stay_year" style="width:100px"></el-input>
                    年
                    </el-row>
                    <el-row align="center" justify="center">
                    装机容量
                    <el-input size="mini" v-model="input_volume" style="width:100px"></el-input>
                    万千瓦
                    </el-row>
                </div>
            </el-card>
            <el-card class="box-card" shadow="hover">
                <div slot="header" class="clearfix">
                    <span>建设投资</span>
                </div>
                <div class="text item">
                    <el-row align="center" justify="center">
                    静态投资
                    <el-input size="mini" v-model="input_investment_static" style="width:100px"></el-input>
                    万元
                    </el-row>
                    <el-row align="center" justify="center">
                    可折扣税金
                    <el-input size="mini" v-model="input_discount" style="width:100px"></el-input>
                    万元
                    </el-row>
                    <el-row align="center" justify="center">
                    分年度投资计算方式
                    <el-select size="mini" v-model="value_way" placeholder="请选择" width:>
                        <el-option
                        v-for="way in invest_ways"
                        :key="way.value"
                        :label="way.label"
                        :value="way.value">
                        </el-option>
                    </el-select>
                    </el-row>
                </div>
            </el-card>
            <el-card class="box-card" shadow="hover">
                <div slot="header" class="clearfix">
                    <span>资本金投入</span>
                </div>
                <div class="text item">
                    <el-row align="center" justify="center">
                    资本金投入方式
                    <el-select size="mini" v-model="money_input_way" placeholder="请选择">
                        <el-option
                        v-for="way in money_input_ways"
                        :key="way.value"
                        :label="way.label"
                        :value="way.value">
                        </el-option>
                    </el-select>
                    </el-row>
                    <el-row align="center" justify="center">
                    资本金比例
                    <el-input size="mini" v-model="input_ratio" style="width:100px"></el-input>
                    %
                    </el-row>
                    <el-row align="center" justify="center">
                    资本金基准内部收益率
                    <el-input size="mini" v-model="input_inner1" style="width:100px"></el-input>
                    %
                    </el-row>
                    <el-row align="center" justify="center">
                    全投资税前基准内部收益率
                    <el-input size="mini" v-model="input_inner2" style="width:100px"></el-input>
                    %
                    </el-row>
                    <el-row align="center" justify="center">
                    全投资税后基准内部收益率
                    <el-input size="mini" v-model="input_invest_all" style="width:100px"></el-input>
                    %
                    </el-row>
                    <el-row align="center" justify="center">
                    EVA股权资本成本率
                    <el-input size="mini" v-model="input_eva" style="width:100px"></el-input>
                    %
                    </el-row>
                </div>
            </el-card>
            <el-card class="box-card" shadow="hover">
                <div slot="header" class="clearfix">
                    <span>流动资金及短期贷款</span>
                </div>
                <div class="text item">
                   <el-row align="center" justify="center">
                    单位千瓦指标
                    <el-input size="mini" v-model="input_per_kw" style="width:100px"></el-input>
                    元/千瓦
                    </el-row>
                    <el-row align="center" justify="center">
                    一年期及以下贷款利率
                    <el-input size="mini" v-model="input_loans_rate" style="width:100px"></el-input>
                    %
                    </el-row>
                </div>
            </el-card>
            <el-card class="box-card" shadow="hover">
                <div slot="header" class="clearfix">
                    <span>长期借款利息</span>
                </div>
                <div  class="text item">
                    <el-row align="center" justify="center">
                    预定还款期
                    <el-input size="mini" v-model="input_repayment_period" style="width:100px"></el-input>
                    年
                    </el-row>
                    <el-row align="center" justify="center">
                    长期贷款利率
                    <el-input size="mini" v-model="input_long_rend_rate" style="width:100px"></el-input>
                    %
                    </el-row>
                    <el-row align="center" justify="center">
                    还本付息方式
                    <el-select size="mini" v-model="repay_method" placeholder="请选择">
                        <el-option
                        v-for="item in repay_methods"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                    </el-row>

                </div>
            </el-card>
        </div>
    </el-tab-pane>
    <el-tab-pane label="成本费用" name="second">
        <div>
            <el-card class="box-card" shadow="hover">
                <div slot="header" class="clearfix">
                    <span>折旧费</span>
                </div>
                <div class="text item">
                <el-row align="center" justify="center">
                计算方式
                <el-select size="mini" v-model="value" placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                </el-row>
                <el-row align="center" justify="center">
                    使用时限
                    <el-input size="mini" v-model="input_Use_time_limit" style="width:100px"></el-input>
                    年
                </el-row>
                <el-row align="center" justify="center">
                    报废率
                    <el-input size="mini" v-model="input_scrap_rate" style="width:100px"></el-input>
                    %
                </el-row>
                </div>
            </el-card>
            <el-card class="box-card" shadow="hover">
                <div slot="header" class="clearfix">
                    <span>维护费用</span>
                </div>
                <div class="text item">
                    <el-row align="center" justify="center">
                    流入方式
                    <el-select size="mini" v-model="into_way" placeholder="请选择">
                        <el-option
                        v-for="item in into_ways"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                    </el-row>
                </div>
            </el-card>
            <el-card class="box-card" shadow="hover">
                <div slot="header" class="clearfix">
                    <span>运维费</span>
                </div>
                <div class="text item"> 
                    <el-row align="center" justify="center">
                    流入方式
                    <el-select size="mini" v-model="into_way_w" placeholder="请选择">
                        <el-option
                        v-for="item in into_ways_w"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                    </el-row>
                </div>
            </el-card>
            <el-card class="box-card" shadow="hover">
                <div slot="header" class="clearfix">
                    <span>人工成本</span>
                </div>
                <div class="text item">
                    <el-row align="center" justify="center">
                    员工数量流入方式
                    <el-select size="mini" v-model="into_way_employee" placeholder="请选择">
                        <el-option
                        v-for="item in into_way_employees"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                    </el-row>
                    <el-row align="center" justify="center">
                    平均人工成本
                    <el-input size="mini" v-model="input_artificial_cost" style="width:100px"></el-input>
                    万元/年.人
                    </el-row>
                </div>
            </el-card>
            <el-card class="box-card" shadow="hover">
                <div slot="header" class="clearfix">
                    <span>材料费</span>
                </div>
                <div class="text item">
                    <el-row align="center" justify="center">
                    材料费定额
                    <el-input size="mini" v-model="input_material_fee" style="width:100px"></el-input>
                    元/千瓦
                    </el-row>
                </div>
            </el-card>
            <el-card class="box-card" shadow="hover">
                <div slot="header" class="clearfix">
                    <span>保险费</span>
                </div>
                <div class="text item">
                    <el-row align="center" justify="center">
                    保险费率
                    <el-input size="mini" v-model="input_insurance_rate" style="width:100px"></el-input>
                    %
                    </el-row>
                </div>
            </el-card>
            <el-card class="box-card" shadow="hover">
                <div slot="header" class="clearfix">
                    <span>其他费用1</span>（各年相同）
                </div>
                <div class="text item">
                    <el-row align="center" justify="center">
                    其他费用定额
                    <el-input size="mini" v-model="input_other_fee1" style="width:100px"></el-input>
                    元/千瓦
                    </el-row>
                </div>
            </el-card>
            <el-card class="box-card" shadow="hover">
                <div slot="header" class="clearfix">
                    <span>其他费用2</span>    (项目特殊费用，非经常性费用)
                </div>
                <div class="text item">
                    <el-row align="center" justify="center">
                    是否有其他费用
                    <el-select size="mini" v-model="input_other_fee2" placeholder="请选择">
                        <el-option
                        v-for="item in input_other_fee2s"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                    </el-row>
                </div>
            </el-card>
            <el-card class="box-card" shadow="hover">
                <div slot="header" class="clearfix">
                    <span>两项规则考核</span>
                </div>
                <div class="text item">
                    <el-row align="center" justify="center">
                     用电指标       
                    <el-input size="mini" v-model="input_electricity_quotas" style="width:100px"></el-input>
                    元/千瓦时
                    </el-row>
                </div>
            </el-card>
            <el-card class="box-card" shadow="hover">
                <div slot="header" class="clearfix">
                    <span>服务费</span>
                </div>
                <div class="text item">
                    <el-row align="center" justify="center">
                    用电指标       
                    <el-input size="mini" v-model="input_electricity_quotas2" style="width:100px"></el-input>
                    元/千瓦时
                    </el-row>
                </div>
            </el-card>
        </div>
    </el-tab-pane>
    <el-tab-pane label="收入税金" name="third">
        <div>
            <el-card class="box-card" shadow="hover">
                <div slot="header" class="clearfix">
                    <span>电量</span>
                </div>
                <div class="text item">
                <el-row align="center" justify="center">
                    首年理论等效发电小时数
                    <el-input size="mini" v-model="input_generation_time" style="width:100px"></el-input>
                    小时
                </el-row>
                <el-row align="center" justify="center">
                    投运首年衰减率
                    <el-input size="mini" v-model="input_attenuation" style="width:100px"></el-input>
                    %
                </el-row>
                <el-row align="center" justify="center">
                    第二年及以后逐年衰减率
                    <el-input size="mini" v-model="input_scrap_rate" style="width:100px"></el-input>
                    %
                </el-row>
                <el-row align="center" justify="center">
                    各年发电量系数是否自动计算
                <el-select size="mini" v-model="power_gener_auto" placeholder="请选择" style="width:100px">
                    <el-option
                    v-for="item in yesorno"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                </el-row>
                <el-row align="center" justify="center">
                    上网电量计算方式
                 <el-select size="mini" v-model="power_cul_method" placeholder="请选择">
                    <el-option
                    v-for="item in auto_cul"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                </el-row>
                </div>
            </el-card>
            <el-card class="box-card" shadow="hover">
                <div slot="header" class="clearfix">
                    <span>分布式项目</span>
                </div>
                <div class="text item">
                <el-row align="center" justify="center">
                    是否自发自用余电上网
                    <el-select size="mini" v-model="electric_online" placeholder="请选择" style="width:100px">
                    <el-option
                    v-for="item in yesorno"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                </el-row>
                <el-row align="center" justify="center">
                    自发自用比例
                    <el-input size="mini" v-model="input_private_use" style="width:100px"></el-input>
                    %
                </el-row>
                </div>
            </el-card>
            <el-card class="box-card" shadow="hover">
                <div slot="header" class="clearfix">
                    <span>含税电价</span>（集中式电价或自发自用电价）
                </div>
                <div class="text item">
                <el-row align="center" justify="center">
                    上网电价是否各年相等
                    <el-select size="mini" v-model="electric_price_equal" placeholder="请选择" style="width:100px">
                    <el-option
                    v-for="item in yesorno"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                    </el-select>
                </el-row>
                <el-row align="center" justify="center">
                    运营期统一上网电价
                    <el-input size="mini" v-model="input_unified_price" style="width:100px"></el-input>
                    元/千瓦时
                </el-row>
                </div>
            </el-card>
            <el-card class="box-card" shadow="hover">
                <div slot="header" class="clearfix">
                    <span>其他营业外收入</span>（扣除增值税即增即退50%以外的营业外收入,以不含税价计）
                </div>
                <div class="text item">
                <el-row align="center" justify="center">
                    运营期各年是否有其他收入
                    <el-select size="mini" v-model="other_income" placeholder="请选择" style="width:100px">
                    <el-option
                    v-for="item in yesorno"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                    </el-select>
                </el-row>
                </div>
            </el-card>
            <el-card class="box-card" shadow="hover">
                <div slot="header" class="clearfix">
                    <span>税率</span>
                </div>
                <div class="text item">
                <el-row align="center" justify="center">
                    售电收入增值税税率
                    <el-input size="mini" v-model="input_sell_income" style="width:100px"></el-input>
                    %
                </el-row>
                <el-row align="center" justify="center">
                    维修费增值税税率
                    <el-input size="mini" v-model="input_maintenance_rate" style="width:100px"></el-input>
                    %
                </el-row>
                <el-row align="center" justify="center">
                    运维费增值税税率
                    <el-input size="mini" v-model="input_operations_rate" style="width:100px"></el-input>
                    %
                </el-row>
                <el-row align="center" justify="center">
                    材料费增值税税率
                    <el-input size="mini" v-model="input_materials_rate" style="width:100px"></el-input>
                    %
                </el-row>
                <el-row align="center" justify="center">
                    两项规则增值税税率
                    <el-input size="mini" v-model="input_two_prin_rate" style="width:100px"></el-input>
                    %
                </el-row>
                <el-row align="center" justify="center">
                    其他费用1增值税税率
                    <el-input size="mini" v-model="input_fee1_rate" style="width:100px"></el-input>
                    %
                </el-row>
                <el-row align="center" justify="center">
                    其他费用2增值税税率
                    <el-input size="mini" v-model="input_fee2_rate" style="width:100px"></el-input>
                    %
                </el-row>
                <el-row align="center" justify="center">
                    企业所得税税率
                    <el-input size="mini" v-model="input_enterprise_income_rate" style="width:100px"></el-input>
                    %
                </el-row>
                <el-row align="center" justify="center">
                    城市维护建设税税率
                    <el-input size="mini" v-model="input_city_repair_rate" style="width:100px"></el-input>
                    %
                </el-row>
                <el-row align="center" justify="center">
                    教育费附加
                    <el-input size="mini" v-model="input_edu_fee" style="width:100px"></el-input>
                    %
                </el-row>
                <el-row align="center" justify="center">
                    注定盈余公积金比例
                    <el-input size="mini" v-model="input_surplus_reserve_ratio1" style="width:100px"></el-input>
                    %
                </el-row>
                <el-row align="center" justify="center">
                    任意盈余公积金比例
                    <el-input size="mini" v-model="input_surplus_reserve_ratio12" style="width:100px"></el-input>
                    %
                </el-row>
                <el-row align="center" justify="center">
                    是否享受增值税即增即退50%
                    <el-select size="mini" v-model="if_refund" placeholder="请选择" style="width:100px">
                    <el-option
                    v-for="item in yesorno"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                    </el-select>
                 </el-row>   
                <el-row align="center" justify="center"> 
                    所得税N免N减半
                    <el-select size="mini" v-model="if_NNhalve" placeholder="请选择" style="width:100px">
                    <el-option
                    v-for="item in yesorno"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                    </el-select>
                 </el-row>
                <el-row align="center" justify="center">
                    免交年数
                    <el-input size="mini" v-model="input_free_year" style="width:100px"></el-input>
                    年
                </el-row>
                <el-row align="center" justify="center">
                    减半年数
                    <el-input size="mini" v-model="input_halve_year" style="width:100px"></el-input>
                    年
                </el-row>                
                </div>
            </el-card>
        </div>
    </el-tab-pane>
    <el-tab-pane label="敏感性参数" name="fourth">
      <div>
            <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
                <span class="color:green">敏感性分析参数</span>
            </div>
            <div class="text item">
                <el-row align="center" justify="center">
                    是否进行敏感性分析
                    <el-select size="mini" v-model="if_analysis" placeholder="请选择" style="width:100px">
                    <el-option
                    v-for="item in yesorno"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                    </el-select>
                </el-row>
            </div>
            </el-card>
            <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
                <span>因素变化步长</span>
            </div>
            <div class="text item">
                <el-row align="center" justify="center">
                    投资变化
                    <el-input size="mini" v-model="input_invest_chan" style="width:100px"></el-input>
                    %
                </el-row>
                <el-row align="center" justify="center">
                    利用小时变化
                    <el-input size="mini" v-model="input_hour_chan" style="width:100px"></el-input>
                    %
                </el-row>
                <el-row align="center" justify="center">
                    电价变化
                    <el-input size="mini" v-model="input_power_price_chan" style="width:100px"></el-input>
                    %
                </el-row>
                <el-row align="center" justify="center">
                    利率变化
                    <el-input size="mini" v-model="input_rate_chan" style="width:100px"></el-input>
                    %
                </el-row>
            </div>
            </el-card>
        </div>
    </el-tab-pane>
  </el-tabs>
</el-card>
</main>
</div>

</div>
</template>
<script>
// url: https://juejin.cn/post/6844904095749242888
// import { removeWatermark, setWaterMark } from '@/common/watermark'

// url: https://www.cnblogs.com/bubuabc/p/14262532.html
import watermark from '@/common/watermark_img'

// url: https://blog.csdn.net/weixin_43900862/article/details/88895754
// import watermark from '@/common/watermark_2';

export default({
  name: 'HomeView',
  data(){
    return {
        ncepu_logo: require('@/assets/images/ncepu_logo.png'),
        // ncepu_logo: require('../../assets/images/ncepu_logo.png'),

        activeName: 'first',

        options: [{
          value: '选项1',
          label: '查找法定日'
        }, {
          value: '选项2',
          label: '查找法定日'
        }, {
          value: '选项3',
          label: '查找法定日'
        }],
        value: '选项1',

        invest_ways: [{
          value: 'way1',
          label: '建设期平均投入'
        }, {
          value: 'way2',
          label: '建设期平均投入'
        }, {
          value: 'way3',
          label: '建设期平均投入'
        }],
        value_way: 'way1',

        money_input_ways: [{
          value: 'money_input_way1',
          label: '等比例投入'
        }, {
          value: 'money_input_way2',
          label: '等比例投入'
        }, {
          value: 'money_input_way3',
          label: '等比例投入'
        }],
        money_input_way: 'money_input_way1',

        input: '',
        
        repay_methods:[{
            value: "repay_method1",
            label: "等额还本利息照付"
        },{
            value: "repay_method2",
            label: "等额还本利息照付"
        },{
            value: "repay_method3",
            label: "等额还本利息照付"
        }],
        repay_method: 'repay_method1',

        into_ways:[{
            value:"into_way1",
            label:"自动流入"
        },{
            value:"into_way2",
            label:"自动流入"
        },{
            value:"into_way3",
            label:"自动流入"
        }],
        into_way: "into_way1",
        
        into_ways_w:[{
            value:"into_way11",
            label:"自动流入"
        },{
            value:"into_way12",
            label:"自动流入"
        },{
            value:"into_way13",
            label:"自动流入"
        }],
        into_way_w: "into_way11",

        into_way_employees:[{
            value:"into_way_employees1",
            label:"自动流入"
        },{
            value:"into_way_employees2",
            label:"自动流入"
        },{
            value:"into_way_employees3",
            label:"自动流入"
        }],
        into_way_employee:'into_way_employees1',

        input_other_fee2s:[{
            value:"0",
            label:"无"
        },{
            value:"1",
            label:"有"
        }],
        input_other_fee2:'0',

        yesorno:[{
            value:"yes",
            label:"是"
        },{
            value:"no",
            label:"否"
        }],
        power_gener_auto:"yes",  //多个选择框公用一个组件
        electric_online:"yes",
        electric_price_equal:"yes",
        other_income:"yes",
        if_refund:"yes",
        if_NNhalve:"yes",

        if_analysis:"yes",

        auto_cul:[{
          value:"auto1",
          label:"自动计算"
        },{
          value:"auto2",
          label:"自动计算"
        },{
          value:"auto3",
          label:"自动计算"
        }],
        power_cul_method:"auto1",


        input_start_year:'',
        input_build_year:'',
        input_build_month:'',
        input_stay_year:'',
        input_volume:'',
        input_investment_static:'',
        input_discount:'',
        input_ratio:'',
        input_inner1:'',
        input_inner2:'',
        input_invest_all:'',
        input_eva:'',
        input_per_kw:'',
        input_loans_rate:'',
        input_repayment_period:'',
        input_long_rend_rate:'',
        input_Use_time_limit:'',
        input_scrap_rate:'',
        input_artificial_cost:'',
        input_material_fee:'',
        input_insurance_rate:'',
        input_other_fee1:'',
        input_electricity_quotas:'',
        input_electricity_quotas2:'',
        input_generation_time:'',
        input_attenuation:'',
        input_private_use:'',
        input_unified_price:'',
        input_sell_income:'',
        input_maintenance_rate:'',
        input_operations_rate:'',
        input_materials_rate:'',
        input_two_prin_rate:'',
        input_fee1_rate:'',
        input_fee2_rate:'',
        input_enterprise_income_rate:'',
        input_city_repair_rate:'',
        input_edu_fee:'',
        input_surplus_reserve_ratio1:'',
        input_surplus_reserve_ratio12:'',
        input_free_year:'',
        input_halve_year:'',
        input_invest_chan:'',
        input_hour_chan:'',
        input_power_price_chan:'',
        input_rate_chan:'',



      };
  },
  methods: {
    handleClick(tab, event) {
        console.log(tab, event);
      }
  },
mounted() {
    // setWaterMark('NCEPU', '华北电力大学');
    // console.log(this.ncepu_logo)
    setTimeout(() => {
        watermark('viewWeb',this.ncepu_logo)
    }, 200)
    // watermark();
},
destroyed() {
    // removeWatermark();
},
  
});
</script>

<style scoped>

/* #secondCanvas{
    position:fixed;
    z-index:999;
    top:0;
} */

.viewWeb{
    position: relative;
}

.breadcrumb-wrapper,
.tabs-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

header {
  position: fixed;
  background: #fff;
  width: 100%;
  z-index: 999;
}

.tabs-wrapper.el-card {
  border-radius: 20px;
  height: 100%;
}

#main {
  background: #eae7e7;
  box-sizing: border-box;
  padding: 58px 0 18px;
  height: 100vh;
}

.breadcrumb-wrapper {
  height: 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tabs-wrapper.el-card /deep/ .el-card__body {
  box-sizing: border-box;
  height: 100%;
}

.el-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.el-tabs /deep/ .el-tabs__content {
  flex: 1;
  overflow: auto;
  padding: 10px 0;
}

.text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .item > .el-row {
    width: 30%;
    height: 40px;
    line-height: 40px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card:not(:last-child) {
    margin-bottom: 10px;
  }
</style>
